<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/css/swiper.min.css" />
		<script src="../js/js/swiper.min.js"></script>
		<script src="../jquery-2.2.3.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#main {
				width: 910px;
				margin: 0 auto;
				
			}
			
			a {
				text-decoration: none;
			}
			
			li {
				list-style: none;
			}
			
			#header {
				width: 910px;
				height: 100px;
				margin: 0 auto;
				position: relative;
				/*background: url(../img/FEAF692865C98592E5E9384A5F338282.png) right  ;*/
			}
			
			#logo {
				position: absolute;
				top: 3px;
			}
			
			#nav {
				/*border: 1px solid black;*/
				width: 726px;
				height: 100px;
				position: absolute;
				left: 180px;
				top: 4px;
				background: url(../img/FEAF692865C98592E5E9384A5F338282.png) right center;
				/*background-color: rgb(34, 100, 64);*/
				/*border-radius: 5px;*/
			}
			
			#nav li {
				display: inline-block;
				line-height: 33px;
				margin-left: 50px;
				margin-top: 33px;
			}
			
			#nav a {
				color: white;
				margin-left: 8px;
			}
			
			#nav a:hover {
				color: gold;
			}
			
			.last {
				width: 146px;
				background: url(../img/menu.jpg) right;
			}
			
			#drop-menu {
				display: none;
				z-index: 10;
				position: absolute;
				width: 200px;
				top: 72px;
				left: 350px;
				background: rgb(12, 162, 81);
				font-size: 13px;
				border: 2px solid darkgrey;
			}
			
			#drop-menu li {
				height: 30px;
				padding-left: 10px;
			}
			
			#drop-menu a {
				color: white;
				line-height: 30px;
			}
			
			#top {
				width: 730px;
				height: 30px;
				position: absolute;
				top: 10px;
				right: 10px;
			}
			
			#language {
				position: absolute;
				right: 0;
				z-index: 10;
			}
			
			#top p {
				font-size: 10px;
				position: absolute;
				left: -20px;
				z-index: 2;
			}
			
			#language a {
				color: black;
				font-size: 13px;
			}
			
			#inter {
				width: 200px;
				height: 25px;
			}
			#middle{
				width: 910px;
				margin: 0 auto;
			}
			#middle{
				width: 910px;
				margin: 0 auto;
			}
			#headLine li{
				display: inline-block;
				margin-left: 10px;
			}
			#headLine a{
				color: forestgreen;
			}
			#slider1{
				width: 83px;
				height: 2px;
				background: forestgreen;
				position: absolute;
			}
			#middleContent{
				width: 910px;
				margin-top: 10px;
			}
			#problem,#promise,#bigYear{
				display: none;
			}
				
			
			#content p{
				font-size: 12px;
				margin-top: 13px;
			}
			#bottom {				
				width: 910px;
				height: 300px;
				margin: 0 auto;
				clear: both;
			}			
			#bLeft {
				float: left;
			}
			
			#bRight {
				float: right;
			}			
			#codeImg {
				display: none;
				z-index: 5;
				position: absolute;
				top: 410px;
				right: 470px;
			}
			
			#b-top {
				clear: both;
				width: 350px;							
				margin: 0 auto;
				font-size: 10px;
			}
			
			#b-bottom {
				width: 350px;
				clear: both ;
				font-size: 10px;
				margin: 0 auto;
				margin-top: 20px;
			}
			#b-bottom p{
				text-align: center;
			}
			
			.valueList{
				font-size: 13px;
				display: none;
			}	
		</style>
	</head>

	<body>
		<!--全局div-->
		<div id="main">
			<!--顶部-->
			<div id="header">
				<a href="###" id="logo"><img src="../img/logo.jpg" /></a>
				<div id="top">
					<p>中国</p>
					<div id="language">
						<select name="" id="inter">
							<option value="">select language</option>
							<option value="">Chinese</option>
							<option value="">English</option>
						</select> 丨
						<a href="###">进入全球官网</a>
					</div>
				</div>
				<div id="nav">
					<ul>
						<li class="news">
							<a href="###">新闻动态</a>
						</li>
						<li id="drop">
							<a href="###">美食与营养</a>
						</li>
						<li>
							<a href="###">加盟流程</a>
						</li>
						<li>
							<a href="###">关于我们</a>
						</li>
						<li class="last">
							<a href="###">快餐店位置查询</a>
						</li>
					</ul>
				</div>
				<!--美食与营养下拉菜单-->
				<div id="drop-menu">
					<ul>
						<li>
							<a href="###">超值 Value</a>
						</li>
						<hr />
						<li>
							<a href="###">经典 Classic</a>
						</li>
						<hr />
						<li>
							<a href="###">精选 Premium</a>
						</li>
						<hr />
						<li>
							<a href="###">低脂 Low Fat</a>
						</li>
						<hr />
						<li>
							<a href="###">百味卷 Wrap</a>
						</li>
						<hr />
						<li>
							<a href="###">沙拉 Salad</a>
						</li>
						<hr />
						<li>
							<a href="###">聚餐服务 Catering</a>
						</li>
						<hr />
						<li>
							<a href="###">饮料和小食 Drinks Sides</a>
						</li>
						<hr />
						<li>
							<a href="###">早餐 Breakfast</a>
						</li>
						<hr />
						<li>
							<a href="###">营养 Nutrition</a>
						</li>
						<hr />
						<li>
							<a href="###">如何点餐 How To Order</a>
						</li>
					</ul>
				</div>
			</div>
			<!--中间-->
			<div id="middle">
				<div id="aboutUs">
					<div id="headLine">
						<ul>
							<li id="nav1"><a href="###">关于我们</a></li>丨
							<li id="nav2"><a href="###">我们的承诺</a></li>丨
							<li id="nav3"><a href="###">常见问题</a></li>丨
							<li id="nav4"><a href="###">大年事表</a></li>丨
						</ul>
						<div id="slider"></div>
					</div>
					<br />
					<hr />
					<div id="middleContent">
					    <div id="content">	
						<div style="color: forestgreen;">关于我们 SUBWAY® 赛百味快餐店的历史</div>
						<p>1965 年，在美国康涅狄格州的布里奇波特，弗雷德.德卢卡 (Fred Deluca) 刚刚高中毕业。
							和许多同龄人一样，他非常渴望进入大学深造。尽管他是一个勤奋工作、能干且可靠的年轻人，
							但是依靠在当地五金店打零工，每小时挣 1.25 美元，实在难以筹够学费。</p>
						<p>沮丧的弗雷德决定向家里的好友彼得.巴克 (Peter Buck) 博士寻求一些建议。两人结交多年
							，弗雷德告诉巴克博士自己渴望通过学习成为一名医生，并希望巴克博士能够借给他一笔学费。
							但是，巴克博士却告诉弗雷德一个将会改变他的生活和全世界人民生活的主意。</p>	
						<p>
							我认为你应该开一家潜水艇三明治快餐店，”巴克博士说。
						</p>	
						<p>
							刚开始，弗雷德疑虑重重，但当巴克博士说到这家三明治店可以支付弗雷德将来的学费时，
							他立刻同意合伙开店了。当晚，弗雷德和巴克博士就为创立第一家 SUBWAY® 赛百味快餐店结成了合作伙伴关系。
						</p>
						<p>
							在第一天的中午时分，弗雷德和彼得的潜水艇三明治商店就开业了，顾客们蜂拥而至。
							从那天开始，公司不断茁壮发展。弗雷德和彼得的目标是在 10 年内开 32 家潜水艇三明治快餐店。到了 1974 年，
							也就是他们成立第一家三明治快餐店八年后，弗雷德和彼得在美国的康涅狄格州拥有和管理着十六家快餐店，只实现了一半的目标。
						</p>
						<p>
							就在弗雷德和彼得盼望着扩大业务时，他们想到了特许经营，一开始他们忽略了这一点，以为特许经营是对“大公司”而言的。
							 渴望成功的决心促使弗雷德和彼得坚定，特许加盟才是实现目标的关键所在。 因此，弗雷德约见了他的朋友布莱恩.迪克森 (Brian Dixon) 并向他提出了非常丰厚的条件。他向布莱恩提供贷款，
							要求他购买其中一家快餐店，但为了增加吸引力，弗雷德告诉布莱恩，如果他不喜欢这个行业，可以归还快餐店，两不相欠。
						</p>
						<p>
							布莱恩就是著名的 SUBWAY® 赛百味首位加盟商，他为 SUBWAY®赛百味业务模式制定了新标准。这样一来，彼得和弗雷德不仅实现了他们的目标，
							而且超越了当初的预想。现在是他们运营赛百味的第 43 个年头，SUBWAY® 赛百味快餐店已成为世界上最大的潜水艇三明治特许经营连锁店，
							在美国、加拿大和澳大利亚的分店数量已超过麦当劳 (McDonald’s®)。弗雷德.德卢卡和 SUBWAY® 赛百味连锁店获得过无数的奖项和荣誉，SUBWAY® 赛百味品牌管理顾问（上海）有限公司的名字及其产品还在许多电视节目和动画片中出现过。
							SUBWAY® 赛百味加盟店从美国康涅狄格州布里奇波特普通的三明治快餐店开始，经历了漫长的发展过程。
						</p>
						<p>
							有关 SUBWAY® 赛百味快餐店的详细信息
							<a href="###" style="color: forestgreen; text-decoration: "";">请单击此处</a>
						</p>
					</div>
					    <div id="promise">
						<img src="../img 7/adasf.png"/>
					   </div>
					   <div id="problem">
						<img src="../img 7/fgahsg.png"/>
						<img src="../img 7/promblem.png"/>
					   </div>
					  <div id="bigYear">
						 <img src="../img 7/5C3C22BA5F6B672DC2F541B0527D268D.png"/>
					  </div>
					</div>
				</div>
			</div>
			<!--下部-->
			<div id="bottom">
				<div id="bLeft">
					<a href="###"><img src="../img/home-box-1_CN.jpg" /></a>
					<a href="###"><img src="../img/home-box-2_CN.jpg" /></a>
					<a href="###"><img src="../img/home-box-3_CN.jpg" /></a>
				</div>
				<div id="bRight">
					<a href="###"><img src="../img/weibo_CN.jpg" /></a>
					<a href=""><img src="../img/weixin_CN.jpg" id="weChat" /></a>
					<img src="../img/code.png" id="codeImg" />
				</div>
				<div id="b-top">
					<a href="###">主页</a>丨
					<a href="###">菜单/营养</a> 丨
					<a href="###">如何加盟 </a> 丨
					<a href="###">关于我们</a> 丨
					<a href="###">快餐店位置查询</a>
					<br />
					<a href="###">联系我们</a> 丨
					<a href="###"> 使用条款</a> 丨
					<a href="###">隐私权政策</a> 丨
					<a href="###">SUBWAY Partners™</a>
				</div>
				<div id="b-bottom">
					SUBWAY® is a Registered Trademark of Subway IP Inc.
					<br />
					<p>®2016 Subway IP Inc.</p> 
				</div>
			</div>
		</div>
		<script>
			
			// 美食下拉菜单
			var dropMenu = document.getElementById("drop-menu");
			var drop = document.getElementById("drop");
			var weChat = document.getElementById("weChat");
			var codeImg = document.getElementById("codeImg");
			var theaArr = document.querySelectorAll("#drop-menu a");
			var btImgArr = document.querySelectorAll("#bottom img");
			var selOpition = document.querySelectorAll("#inter>option");
			
			// 下拉菜单
			drop.onmouseover = function() {
				dropMenu.style.display = "block";
				for(var i = 0; i < theaArr.length; i++) {
					theaArr[i].onmouseover = function() {
						this.style.color = "gold";
					}
					theaArr[i].onmouseout = function() {
						this.style.color = "";
					}
				}
			}
			dropMenu.onmouseleave = function() {
					dropMenu.style.display = "none";
			}
			// 二维码图片
			weChat.onmouseover = function() {
				codeImg.style.display = "block";
			}
			weChat.onmouseout = function() {
				codeImg.style.display = "none";
			}
			
			for (var i = 0; i < btImgArr.length; i++){
				btImgArr[i].onmouseenter = function(){
					this.style.background = "gold";
					
				}
			}
			// 获取导航li
		 var liArr = document.querySelectorAll("#headLine li");
	     var slider = document.getElementById("slider"); 
	     var speed = 83;
	        	for(var i = 0; i < liArr.length; i++){
	        		liArr[i].onclick = function(){
	        			
	        		}
	        	}
	     $("#nav1").on("click",function(){
	     	$("#content").css({display: "block"})
	     	$("#promise").css({display: "none"})
	     	$("#problem").css({display: "none"})
	     	$("#bigYear").css({display: "none"})
	     })
	       $("#nav2").on("click",function(){
	     	$("#promise").css({display: "block"})
	     	$("#content").css({display: "none"})
	     	$("#problem").css({display: "none"})
	     	$("#bigYear").css({display: "none"})
	     })  			
	       $("#nav3").on("click",function(){
	     	$("#problem").css({display: "block"})
	     	$("#promise").css({display: "none"})
	     	$("#content").css({display: "none"})
	     	$("#bigYear").css({display: "none"})
	     })  			
	       $("#nav4").on("click",function(){
	     	$("#bigYear").css({display: "block"})
	     	$("#promise").css({display: "none"})
	     	$("#problem").css({display: "none"})
	     	$("#content").css({display: "none"})
	     })  		
	       
		    
		
		</script>
	</body>

</html>
